<mat-toolbar class="nav">
	<a class="navlink" [routerLink]="['/data']">Go to Data</a>
</mat-toolbar>
<div class="chart-container">
	<mat-spinner class="spinner" strokeWidth="10" [diameter]="diameter"></mat-spinner>
	<div class="dateselect">
		<h4>Date Range</h4>
		<mat-form-field class="datefield">
			<input matInput [matDatepicker]="picker1" placeholder="Start date" #startdateinput (dateChange)="loadCharts(startdateinput.value, enddateinput.value)">
			<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
			<mat-datepicker #picker1></mat-datepicker>
		</mat-form-field>
		<mat-form-field class="datefield">
			<input matInput [matDatepicker]="picker2" placeholder="End date" #enddateinput (dateChange)="loadCharts(startdateinput.value, enddateinput.value)">
			<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
			<mat-datepicker #picker2></mat-datepicker>
	  	</mat-form-field>
	  	<span class="alertmessage" #alertmessage></span>
	</div>
	<div class="covercharts">
		<div>
			<fusioncharts
			    [id]="id_invoke_line"
			    [width]="width"
			    [height]="height"
			    [type]="type_line"
			    [dataFormat]="dataFormat"
			    [dataSource]="PTEdataSource['invoke']['line']"
			></fusioncharts>
		</div>
		<div>
			<fusioncharts
			    [id]="id_query_line"
			    [width]="width"
			    [height]="height"
			    [type]="type_line"
			    [dataFormat]="dataFormat"
			    [dataSource]="PTEdataSource['query']['line']"
			></fusioncharts>
		</div>
		<div>
			<fusioncharts
			    [id]="id_ote_line"
			    [width]="width"
			    [height]="height"
			    [type]="type_line"
			    [dataFormat]="dataFormat"
			    [dataSource]="OTEdataSource"
			></fusioncharts>
		</div>
		<div>
			<fusioncharts
			    [id]="id_lte_line"
			    [width]="width"
			    [height]="height"
			    [type]="type_line"
			    [dataFormat]="dataFormat"
			    [dataSource]="LTEdataSource"
			></fusioncharts>
		</div>
	</div>
</div>